<template>
    <div class="bbox">
        <div class="sub" @click="subNum(id)">-</div>
        <span class="number">{{ value }}</span>
        <div class="add" @click="addNum(id)">+</div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useBuyNumber} from '@/store/discountCoupon'
const props=defineProps(['id','value'])
const BuyNumber = useBuyNumber()

const subNum = (id) => {
    BuyNumber.subNum(id)
    BuyNumber.totalMoney(id)
    BuyNumber.totalBuyNum(id)
    
}
const addNum = (id) => {
    BuyNumber.addNum(id)
    BuyNumber.totalMoney(id)
    BuyNumber.totalBuyNum(id)
}
</script>

<style scoped lang="scss">
.bbox {
    width: 75px;
    height: 22px;
    position: relative;
    top: 20px;
    right: -130px;
    display: inline-block;
    

    .sub {
        position: absolute;
        width: 20px;
        height: 20px;
        left: 0;
        border-radius: 50%;
        line-height: 20px;
        display: inline-block;
        border: 1px solid #88afd5;
        color: #88afd5;
    }
    .number{
        color: #88afd5;
    }
    .add {
        position: absolute;
        width: 20px;
        height: 20px;
        right: 0;
        border-radius: 50%;
        line-height: 20px;
        display: inline-block;
        border: 1px solid #88afd5;
        color: #88afd5;
    }
}
</style>
